<template>
  <div class="content-wrap">
    <div class="mr-10 ml-10">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first"></el-tab-pane>
        <el-tab-pane label="SEO设置" name="second"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="mr-10 ml-10 mb-20">
      <el-form ref="params" :model="params" label-width="124px" class="w640">
        <div v-show="activeIndex == 0">
          <el-form-item label="上级栏目" v-if="params.pid != 0">
            <el-cascader
              :props="categoryProps"
              :show-all-levels="false"
              v-model="categorySelected"
              :options="category"
              @change="handleChange"
              placeholder="不选择为顶级栏目"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item
            label="栏目名称"
            prop="name"
            :rules="[
              {
                required: true,
                message: '请输入栏目名称',
                trigger: 'blur',
              },
              {
                min: 1,
                max: 50,
                message: '栏目不能超过50个字',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="params.name" @change="createPinyin"></el-input>
          </el-form-item>

          <el-form-item
            label="英文名称"
            prop="name_en"
            :rules="[
              {
                required: true,
                message: '请输入栏目英文名称',
                trigger: 'blur',
              },
              {
                min: 1,
                max: 50,
                message: '栏目不能超过50个字',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="params.name_en"></el-input>
          </el-form-item>

          <el-form-item label="栏目标识">
            <el-input v-model="params.pinyin" @change="changePath"></el-input>
          </el-form-item>

          <el-form-item label="栏目路径">
            <el-input v-model="params.path" disabled></el-input>
          </el-form-item>

          <el-form-item label="列表模板">
            <el-select v-model="params.list_view" placeholder="Select">
              <el-option
                v-for="item in views"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="列表模板(英文)">
            <el-select v-model="params.list_view_en" placeholder="Select">
              <el-option
                v-for="item in views"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="内容模板">
            <el-select v-model="params.article_view" placeholder="Select">
              <el-option
                v-for="item in views"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="内容模板(英文)">
            <el-select v-model="params.article_view_en" placeholder="Select">
              <el-option
                v-for="item in views"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="栏目类型">
            <el-radio v-model="params.type" value="0">栏目</el-radio>
            <el-radio v-model="params.type" value="1">单页</el-radio>
          </el-form-item>

          <el-form-item label="是否显示">
            <el-radio v-model="params.status" value="0">显示</el-radio>
            <el-radio v-model="params.status" value="1">隐藏</el-radio>
          </el-form-item>
        </div>

        <div v-show="activeIndex == 1">
          <el-form-item label="栏目描述">
            <el-input v-model="params.description"></el-input>
          </el-form-item>

          <el-form-item label="栏目链接">
            <el-input v-model="params.url"></el-input>
          </el-form-item>

          <el-form-item label="扩展模型">
            <el-radio-group v-model="params.mid">
              <el-radio value="0">基本模型</el-radio>
              <template v-if="modList.length > 0">
                <el-radio
                  :disabled="modelFlag"
                  v-for="(item, index) of modList"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.model_name }}模型
                </el-radio>
              </template>
            </el-radio-group>
            <el-tooltip
              content="如果栏目已经存在文章，则不能更换模型"
              effect="light"
              placement="top-start"
            >
              <el-icon class="ml-20 pointer"
                ><QuestionFilled class="c-165dff"
              /></el-icon>
            </el-tooltip>
          </el-form-item>

          <el-form-item label="打开方式">
            <el-radio v-model="params.target" value="0">当前页面</el-radio>
            <el-radio v-model="params.target" value="1">新页面</el-radio>
          </el-form-item>

          <el-form-item label="栏目排序">
            <el-input v-model="params.sort"></el-input>
          </el-form-item>

          <el-form-item label="seo标题">
            <el-input v-model="params.seo_title"></el-input>
          </el-form-item>

          <el-form-item label="seo关键词">
            <el-input v-model="params.seo_keywords"></el-input>
          </el-form-item>

          <el-form-item label="seo描述">
            <el-input v-model="params.seo_description"></el-input>
          </el-form-item>
          <el-form-item label="seo描述英文">
            <el-input v-model="params.seo_description_en"></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submit('params')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { views } from "@/api/sys_app.js";

import { find, findId, update } from "@/api/category.js";
import { search } from "@/api/article.js";
import { addLabelValue, treeById, tree } from "@/utils/tool.js";
import { list } from "@/api/model.js";
import { pinyin } from "pinyin-pro";
export default {
  name: "category-edit",
  data: () => {
    return {
      id: 0, //栏目
      categorySelected: [], //-1默认选中顶级栏目
      categorySelectedPath: "",
      categoryProps: { checkStrictly: true },

      activeName: "first", //tab 默认显示第一个
      activeIndex: "0", //tab 内容默认显示第一个

      cate: [],
      category: [], //当前所有栏目
      modList: [], //模型列表
      modelFlag: false,
      views: [], //模板
      params: {
        //接口入参
        pid: 0,
        seo_title: "",
        seo_keywords: "",
        seo_description: "",
        seo_description_en: "",
        name: "",
        name_en: "",
        path: "",
        pinyin: "",
        mid: "0",
        description: "",
        url: "",
        sort: 0,
        type: "0",
        target: "0",
        status: "0",
        article_view: "",
        article_view_en: "",
        list_view: "",
        list_view_en: "",
      },
    };
  },

  computed: {},

  created() {
    this.id = this.$route.params.id;
    this.modelList();
    this.query();
    this.findById();
    this.hasArticle();
    this.getviews();
  },

  methods: {
    createPinyin(v) {
      this.params.pinyin = pinyin(v, { toneType: "none" }).replace(/\s+/g, "");
      this.params.path = this.categorySelectedPath
        ? this.categorySelectedPath + this.params.pinyin
        : "/" + this.categorySelectedPath + this.params.pinyin;
    },

    changePath(v) {
      this.params.path = this.categorySelectedPath
        ? this.categorySelectedPath + v
        : "/" + this.categorySelectedPath + v;
    },

    handleClick(tab) {
      this.activeIndex = tab.index;
    },

    async hasArticle() {
      try {
        let res = await search(1, "", this.id);
        if (res.code == 200) {
          this.modelFlag = res.data.count > 0 ? true : false;
        }
      } catch (error) {
        console.log(error);
      }
    },

    //查询
    async query() {
      try {
        let res = await find();
        if (res.code === 200) {
          let data = res.data;
          this.cate = res.data;
          let ids = treeById(this.id, data);
          if (ids.length > 1) {
            ids.length = ids.length - 1;
          }
          console.log(ids);
          this.categorySelected = ids;
          let end = addLabelValue(tree(data));
          this.category = [...end];
        }
      } catch (error) {
        console.log(error);
      }
    },
    //查询模板
    async getviews() {
      try {
        let res = await views();
        if (res.code === 200) {
          this.views = res.data
            .filter((item) => {
              if (item !== "404.html" && item !== "500.html") {
                return true;
              }
            })
            .map((item) => {
              return {
                label: item,
                value: item,
              };
            });
        }
      } catch (error) {
        console.log(error);
      }
    },

    //模型列表
    async modelList() {
      try {
        let res = await list(this.cur);
        if (res.code === 200) {
          this.modList = res.data.list.map((item) => {
            item.id = item.id.toString();
            return item;
          });
        }
      } catch (error) {
        console.log(error);
      }
    },

    //查
    async findById() {
      try {
        let res = await findId(this.id);
        if (res.code === 200) {
          this.params = res.data;
          let path = [];
          this.cate.forEach((sub) => {
            if (sub.id == res.data.pid) {
              path.push("/" + sub.pinyin);
            }
          });

          this.categorySelectedPath = path.join("") + "/";
        }
      } catch (error) {
        console.error(error);
      }
    },

    handleChange(e) {
      //获取路径
      let path = [];
      let ids = Object.values(e);
      ids.forEach((item) => {
        this.cate.forEach((sub) => {
          if (sub.id == item) {
            path.push("/" + sub.pinyin);
          }
        });
      });

      this.categorySelectedPath = path.join("") + "/";

      this.params.path = this.categorySelectedPath + this.params.pinyin;

      if (e[0] != -1) {
        this.params.pid = e[e.length - 1];
      }
    },

    //更新基本信息
    async update() {
      try {
        let res = await update(this.params);
        if (res.code) {
          this.$message({
            message: "更新成功^_^",
            type: "success",
          });
          this.$router.go(-1);
        } else {
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      } catch (error) {
        console.log(error);
      }
    },

    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.update();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped></style>
